<template>
  <div>
    <el-button type="text" @click="dialogFormVisible = true; operateType = 'save'" >添加商品</el-button>

    <el-dialog :visible.sync="dialogFormVisible" title="商品信息" @close="handleClose">
      <el-form :model="product">
        <el-form-item :label-width="formLabelWidth" label="商品编号">
          <el-input v-model="product.id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="商品名称">
          <el-input v-model="product.product_name" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item :label-width="formLabelWidth" label="商品图片">
          <el-upload action="http://localhost:8080/upload" :on-success="handleAvatarSuccess"
                     :before-upload="beforeAvatarUpload" :show-file-list="false">
            <img v-if="product.product_image" :src="product.product_image" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item :label-width="formLabelWidth" label="商品价格">
          <el-input v-model="product.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="商品类型">
          <el-input v-model="product.product_type" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="商品描述">
          <el-input v-model="product.product_desc" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="创建时间">
          <el-date-picker v-model="product.create_time" type="datetime" placeholder="选择日期时间"
                          value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="商品品牌">
          <el-input v-model="product.product_brand" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSave">确定</el-button>
      </div>
    </el-dialog>

    <el-table :data="products" style="width: 100%">
      <el-table-column label="商品编号" min-width="100">
        <template slot-scope="scope">
          <td>{{ scope.row.id }}</td>
        </template>
      </el-table-column>

      <el-table-column label="商品名称" min-width="100">
        <template slot-scope="scope">
          <td>{{ scope.row.product_name }}</td>
        </template>
      </el-table-column>

      <el-table-column label="商品图片" min-width="100">
        <template slot-scope="scope">
          <img :src="scope.row.product_image" alt="商品图片" style="width: 100px; height: 100px;">
        </template>
      </el-table-column>

      <el-table-column label="商品价格" min-width="100">
        <template slot-scope="scope">
          <td>{{ scope.row.price }}</td>
        </template>
      </el-table-column>
      <el-table-column label="商品类型" min-width="100">
        <template slot-scope="scope">
          <td>{{ scope.row.product_type }}</td>
        </template>
      </el-table-column>
      <el-table-column label="商品描述" min-width="100">
        <template slot-scope="scope">
          <td>{{ scope.row.product_desc }}</td>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" min-width="100">
        <template slot-scope="scope">
          <td>{{ scope.row.create_time }}</td>
        </template>
      </el-table-column>
      <el-table-column label="商品品牌" min-width="100">
        <template slot-scope="scope">
          <td>{{ scope.row.product_brand }}</td>
        </template>
      </el-table-column>

      <el-table-column label="操作" fixed="right" width="150">
        <template slot-scope="scope">
          <div style="display: flex; justify-content: space-around;">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger"
                       @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </div>
        </template>
      </el-table-column>

    </el-table>

    <!-- 分页组件，:current-page：当前页，
 :page-size：每页显示的记录数，
 :total：总记录数，
 :layout：分页布局，
 :background：背景颜色，
 :prev-text：上一页按钮文字，
 :next-text：下一页按钮文字，
 :hide-on-single-page：只有一页时隐藏分页组件，
 :current-change：当前页码变化时触发的函数 -->
    <el-pagination :current-page="current" :page-size="pageSize" :total="total" background
                   layout="prev, pager, next" @current-change="loadProduct">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "ProductView",
  data() {
    return {
      //存储用户列表的数组
      products: [],
      //控制对话框显示，默认为隐藏
      dialogFormVisible: false,
      //表单标签的宽度
      formLabelWidth: '120px',
      // 存储用户信息的对象，包括用户ID，用户名，用户密码，用户类型
      product: { id: '', product_name: '', product_image: '', price: '', product_type: '', product_desc: '', create_time: '', product_brand: '' },
      // 操作类型，用于区分保存或更新操作
      operateType: '',
      // 分页信息，总记录行数
      total: 0,
      // 当前页码
      pageSize: 5,
      // 每页显示的记录数
      current: 1,
    }
  },
  methods: {
    // 加载用户列表
    loadProduct(current) {
      this.current = current;
      this.$http.get('product?m=page&current=' + this.current + '&pageSize=' + this.pageSize)
          .then(resp => {
            if (resp.data.data) {
              console.log("商品数据绑定", resp.data.data);
              this.products = resp.data.data.records.map(product => ({
                ...product,
                create_time: new Date(product.create_time).toISOString().slice(0, 19).replace('T', ' ')
              }));
              this.total = resp.data.data.total;
            }
          });
    },
    // 编辑用户
    handleEdit(index, row) {
      console.log("编辑商品信息", index, row);
      this.operateType = 'update';
      this.dialogFormVisible = true;
      this.product = JSON.parse(JSON.stringify(row));

      // 确保 create_time 是字符串类型
      if (this.product.create_time) {
        this.product.create_time = new Date(this.product.create_time).toISOString().slice(0, 19).replace('T', ' ');
      } else {
        this.product.create_time = '';
      }
    },
    // 删除商品信息，列表索引，被选中删除的用户信息
    handleDelete(index, row) {
      // 打印索引和用户信息以便调试
      console.log("删除商品订单信息", index, row);
      // 使用confirm对话框提示用户是否确定删除
      this.$confirm('是否确定删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 发送删除请求
        this.$http.post('product?m=delete&id=' + row.id).then(resp => {
          // 处理后台返回的结果
          if (resp.data.data == true) {
            // 重新加载用户列表
            this.loadProduct(this.current);
            // 显示成功消息
            this.$message({
              message: '删除成功',
              type: 'success'
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 保存用户信息
    // 在 handleSave 方法中，格式化 create_time
    handleSave() {
      // 格式化 create_time
      if (this.product.create_time) {
        this.product.create_time = new Date(this.product.create_time).toISOString().slice(0, 19).replace('T', ' ');
      }

      // 根据操作类型来判断是添加还是更新数据
      if (this.operateType == 'save') {
        // 添加用户，发送保存请求
        this.$http.post('product?m=save', this.$qs.stringify(this.product))
            .then(resp => {
              // 判断是否保存成功
              if (resp.data.data == true) {
                // 打印保存成功信息，便于调试
                console.log('保存订单商品信息成功');
                // 重新加载用户列表
                this.loadProduct(this.current);
              }
            });
      } else {
        // 更新用户，发送更新请求
        this.$http.post('product?m=update', this.$qs.stringify(this.product))
            .then(resp => {
              // 打印请求结果，便于调试
              console.log('更新订单商品信息', resp.data);
              // 判断是否更新成功
              if (resp.data.data == true) {
                // 打印更新成功信息，便于调试
                console.log('更新订单商品信息');
                // 重新加载用户列表
                this.loadProduct(this.current);
              }
            });
      }
      // 关闭对话框
      this.dialogFormVisible = false;
    },
    // 处理上传成功的回调
    handleAvatarSuccess(res, file) {
      // 假设后端返回的数据结构与 UploadView.vue 类似
      this.product.product_image = res.data; // 根据实际情况调整这里的 res.data
    },
    // 上传之前的检查
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isPNG) {
        this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return (isJPG || isPNG) && isLt2M;
    },
    // 清除对话框数据
    handleClose() {
      // 重置用户信息对象和操作类型
      this.product = { id: '', product_name: '', product_image: '', price: '', product_type: '', product_desc: '', create_time: '', product_brand: '' };
      // 清空操作类型
      this.operateType = ''
    }
  },
  //页面挂载钩子
  mounted() {
    this.loadProduct(this.current)
  }
}
</script>

<style scoped>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.el-table .cell {
  white-space: normal !important;
  word-break: break-all;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.operation-buttons {
  display: flex;
  flex-direction: column;
  /* 修改为竖直排列 */
  align-items: center;
}

.operation-buttons .el-button {
  margin: 5px 0;
  /* 调整按钮之间的间距 */
}
</style>